<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Translate</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head>
<body>
<div id="app">
<template>
    <el-row style="margin-bottom: 10px">
        <el-col :span="24" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-radio v-model="radioValue" label="1" @change="radioLabelValue">有道云翻译</el-radio>
            <el-radio v-model="radioValue" label="2" @change="radioLabelValue">百度翻译</el-radio>
        </el-col>
    </el-row>
    <el-row :gutter="10" style="margin: 15px 0">
        <el-col :span="12" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-input
                    placeholder="请输入应用ID"
                    prefix-icon="el-icon-edit"
                    v-model="input_appKey"
                    clearable
					@change="appKeyInputValue"
                    >
                <template slot="prepend">{{app_id}}</template>
            </el-input>
        </el-col>
        <el-col :span="12" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-input
                    placeholder="请输入应用密钥"
                    prefix-icon="el-icon-edit"
                    v-model="input_key"
                    clearable
					@change="keyInputValue"
                    >
                <template slot="prepend">{{app_key}}</template>
            </el-input>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-tag type="success" >源语言：</el-tag>
            <el-select v-model="selectSrcValue==''?'auto':selectSrcValue" clearable filterable placeholder="请选择" @change="selectValue_src">
                <el-option
                        v-for="item in radioValue=='1'?youdao_options:baidu_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="12" :offset="1" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-tag type="success" >目标语言：</el-tag>
            <el-select v-model="selectDistValue==''?'en':selectDistValue" clearable filterable placeholder="请选择" @change="selectValue_dist">
                <el-option
                        v-for="item in radioValue=='1'?youdao_options:baidu_options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                </el-option>
            </el-select>
        </el-col>
    </el-row>
    <el-row >
        <el-col :span="12" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
			<!-- <el-input
			style="background: "#303133";color: "white"; font-family: "Arial Narrow";font-size: 20px;margin-top: 10px;border-radius: 10px;"
			  type="textarea"
			  :rows="15"
			  :autosize="{ minRows: 12, maxRows: 15}
			  placeholder="请输入要翻译的词或语句！"
			  v-model="trans_source">
			</el-input> -->
           <textarea class="grid-content bg-purple-light" v-model="trans_source" placeholder="请输入要翻译的词或语句！"></textarea>
        </el-col>
        <el-col :span="12" :offset="1" :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
            <el-row style="margin-top:50px; width: 80px">
                <el-tooltip v-model="translation_show" manual class="item" effect="dark"  placement="right-end">
                    <div>
                        <el-tag type="info" v-show="translation_show" class="animated bounceInDown">结果：</el-tag>
                    </div>
						<div slot="content" v-show="translation_show" v-for="(item, index) in radioValue=='1'?translation:trans_result" :key="index">
							<span v-if="radioValue=='1'">
								{{item}}</br></br>
							</span>
						    <span v-else-if="radioValue=='2'">
								{{item.dst}}</br></br>
							</span>
						</div>
						
                </el-tooltip>
            </el-row>
            <el-row style="margin-top:100px; margin-left: 80px; width: 80px">
                <el-tooltip  v-model="basic_show" manual class="item" effect="dark"  placement="right-end">
                    <div>
                        <el-tag type="warning" v-show="basic_show" class="animated bounceInDown">基础词典：</el-tag>
                    </div>
                    <div slot="content" v-for="(item, index) in basic" :key="index">
                        {{item}}</br></br>
                    </div>
                </el-tooltip>
            </el-row>
            <el-row style="margin-top:100px; width: 80px">
                <el-tooltip v-model="web_show" manual class="item" effect="dark"  placement="right-end">
                    <div>
                        <el-tag type="danger" v-show="web_show" class="animated bounceInDown">网络解释：</el-tag>
                    </div>
                    <div  slot="content" v-for="(item, index) in web" :key="index" >
                        {{item.key}}：
                        <span v-for="(item1, index1) in item.value" :key="index1">
                            {{item1}}；
                        </span>
                        </br></br>
                    </div>
                </el-tooltip>
            </el-row>
            <el-row style="margin-top:110px; margin-left: 80px; width: 80px" v-show="phonetic_show">
                <el-tooltip  v-model="phonetic_show" manual class="item" effect="dark" placement="right-end">
                    <div>
                        <el-tag type="warning" class="animated bounceInDown">音标：</el-tag>
                    </div>
                    <div slot="content">
                        英式音标：{{uk_phonetic}}</br></br>
						英式发音：<i class="el-icon-video-play" style="font-size: 15px;" v-on:click="playAudio(uk_speech)"></i></br></br>
						美式音标：{{us_phonetic}}</br></br>
						美式发音：<i class="el-icon-video-play" style="font-size: 15px;" v-on:click="playAudio(us_speech)"></i></br>
                    </div>
                </el-tooltip>
            </el-row>
        </el-col>
    </el-row>
	<el-row>
		<el-button type="success" v-show="youdao_button" round v-on:click="youdaoTranslate">Go</el-button>
		<el-button type="warning" v-show="baidu_button" round v-on:click="baiduTranslate">Go</el-button>
	</el-row>
</template>
</div>

<!--vue-resource.min.js需在vue之后引用-->
<!--<script src="../resources/js/vue.js"></script>
<script src="../resources/js/vue-resource.min.js"></script>
<script src="../resources/js/crypto-js4.0.js"></script>
<script src="../resources/js/element-ui@2.13.1_lib_index.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.0.0/crypto-js.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
<!--
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-->
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                youdao_options: [{
                    value: 'auto',
                    label: '自动识别'
                }, {
                    value: 'zh-CHS',
                    label: '中文'
                }, {
                    value: 'en',
                    label: '英文'
                }, {
                    value: 'ja',
                    label: '日文'
                }, {
                    value: 'ko',
                    label: '韩文'
                }, {
                    value: 'fr',
                    label: '法文'
                }, {
                    value: 'es',
                    label: '西班牙文'
                }, {
                    value: 'pt',
                    label: '葡萄牙文'
                }, {
                    value: 'it',
                    label: '意大利文'
                }, {
                    value: 'ru',
                    label: '俄文'
                }, {
                    value: 'vi',
                    label: '越南文'
                }, {
                    value: 'de',
                    label: '德文'
                }, {
                    value: 'ar',
                    label: '阿拉伯文'
                }, {
                    value: 'id',
                    label: '印尼文'
                }, {
                    value: 'af',
                    label: '南非荷兰语'
                }, {
                    value: 'bs',
                    label: '波斯尼亚语'
                }, {
                    value: 'bg',
                    label: '保加利亚语'
                }, {
                    value: 'yue',
                    label: '粤语'
                }, {
                    value: 'ca',
                    label: '加泰隆语'
                }, {
                    value: 'hr',
                    label: '克罗地亚语'
                }, {
                    value: 'cs',
                    label: '捷克语'
                }, {
                    value: 'da',
                    label: '丹麦语'
                }, {
                    value: 'nl',
                    label: '荷兰语'
                }, {
                    value: 'et',
                    label: '爱沙尼亚语'
                }, {
                    value: 'fj',
                    label: '斐济语'
                }, {
                    value: 'fi',
                    label: '芬兰语'
                }, {
                    value: 'el',
                    label: '希腊语'
                }, {
                    value: 'ht',
                    label: '海地克里奥尔语'
                }, {
                    value: 'he',
                    label: '希伯来语'
                }, {
                    value: 'hi',
                    label: '印地语'
                }, {
                    value: 'mww',
                    label: '白苗语'
                }, {
                    value: 'hu',
                    label: '匈牙利语'
                }, {
                    value: 'sw',
                    label: '斯瓦希里语'
                }, {
                    value: 'tlh',
                    label: '克林贡语'
                }, {
                    value: 'lv',
                    label: '拉脱维亚语'
                }, {
                    value: 'lt',
                    label: '立陶宛语'
                }, {
                    value: 'ms',
                    label: '马来语'
                }, {
                    value: 'mt',
                    label: '马耳他语'
                }, {
                    value: 'no',
                    label: '挪威语'
                }, {
                    value: 'fa',
                    label: '波斯语'
                }, {
                    value: 'pl',
                    label: '波兰语'
                }, {
                    value: 'otq',
                    label: '克雷塔罗奥托米语'
                }, {
                    value: 'ro',
                    label: '罗马尼亚语'
                }, {
                    value: 'sr-Cyrl',
                    label: '塞尔维亚语(西里尔文)'
                }, {
                    value: 'sr-Latn',
                    label: '塞尔维亚语(拉丁文)'
                }, {
                    value: 'sk',
                    label: '斯洛伐克语'
                }, {
                    value: 'sl',
                    label: '斯洛文尼亚语'
                }, {
                    value: 'sv',
                    label: '瑞典语'
                }, {
                    value: 'ty',
                    label: '塔希提语'
                }, {
                    value: 'th',
                    label: '泰语'
                }, {
                    value: 'to',
                    label: '汤加语'
                }, {
                    value: 'tr',
                    label: '土耳其语'
                }, {
                    value: 'uk',
                    label: '乌克兰语'
                }, {
                    value: 'ur',
                    label: '乌尔都语'
                }, {
                    value: 'cy',
                    label: '威尔士语'
                }, {
                    value: 'yua',
                    label: '尤卡坦玛雅语'
                }, {
                    value: 'sq',
                    label: '阿尔巴尼亚语'
                }, {
                    value: 'am',
                    label: '阿姆哈拉语'
                }, {
                    value: 'hy',
                    label: '亚美尼亚语'
                }, {
                    value: 'az',
                    label: '阿塞拜疆语'
                }, {
                    value: 'bn',
                    label: '孟加拉语'
                }, {
                    value: 'eu',
                    label: '巴斯克语'
                }, {
                    value: 'be',
                    label: '白俄罗斯语'
                }, {
                    value: 'ceb',
                    label: '宿务语'
                }, {
                    value: 'co',
                    label: '科西嘉语'
                }, {
                    value: 'eo',
                    label: '世界语'
                }, {
                    value: 'tl',
                    label: '菲律宾语'
                }, {
                    value: 'fy',
                    label: '弗里西语'
                }, {
                    value: 'gl',
                    label: '加利西亚语'
                }, {
                    value: 'ka',
                    label: '格鲁吉亚语'
                }, {
                    value: 'gu',
                    label: '古吉拉特语'
                }, {
                    value: 'ha',
                    label: '豪萨语'
                }, {
                    value: 'haw',
                    label: '夏威夷语'
                }, {
                    value: 'is',
                    label: '冰岛语'
                }, {
                    value: 'ig',
                    label: '伊博语'
                }, {
                    value: 'ga',
                    label: '爱尔兰语'
                }, {
                    value: 'jw',
                    label: '爪哇语'
                }, {
                    value: 'kn',
                    label: '卡纳达语'
                }, {
                    value: 'kk',
                    label: '哈萨克语'
                }, {
                    value: 'km',
                    label: '高棉语'
                }, {
                    value: 'ku',
                    label: '库尔德语'
                }, {
                    value: 'ky',
                    label: '柯尔克孜语'
                }, {
                    value: 'lo',
                    label: '老挝语'
                }, {
                    value: 'la',
                    label: '拉丁语'
                }, {
                    value: 'lb',
                    label: '卢森堡语'
                }, {
                    value: 'mk',
                    label: '马其顿语'
                }, {
                    value: 'mg',
                    label: '马尔加什语'
                }, {
                    value: 'ml',
                    label: '马拉雅拉姆语'
                }, {
                    value: 'mi',
                    label: '毛利语'
                }, {
                    value: 'mr',
                    label: '马拉地语'
                }, {
                    value: 'mn',
                    label: '蒙古语'
                }, {
                    value: 'my',
                    label: '缅甸语'
                }, {
                    value: 'ne',
                    label: '尼泊尔语'
                }, {
                    value: 'ny',
                    label: '齐切瓦语'
                }, {
                    value: 'ps',
                    label: '普什图语'
                }, {
                    value: 'pa',
                    label: '旁遮普语'
                }, {
                    value: 'sm',
                    label: '萨摩亚语'
                }, {
                    value: 'gd',
                    label: '苏格兰盖尔语'
                }, {
                    value: 'st',
                    label: '塞索托语'
                }, {
                    value: 'sn',
                    label: '修纳语'
                }, {
                    value: 'sd',
                    label: '信德语'
                }, {
                    value: 'si',
                    label: '僧伽罗语'
                }, {
                    value: 'so',
                    label: '索马里语'
                }, {
                    value: 'su',
                    label: '巽他语'
                }, {
                    value: 'tg',
                    label: '塔吉克语'
                }, {
                    value: 'ta',
                    label: '泰米尔语'
                }, {
                    value: 'te',
                    label: '泰卢固语'
                }, {
                    value: 'uz',
                    label: '乌兹别克语'
                }, {
                    value: 'xh',
                    label: '南非科萨语'
                }, {
                    value: 'yi',
                    label: '意第绪语'
                }, {
                    value: 'yo',
                    label: '约鲁巴语'
                }, {
                    value: 'zu',
                    label: '南非祖鲁语'
                }],
                baidu_options: [{
                        value: 'auto',
                        label: '自动检测'
                    },{
                        value: 'zh',
                        label: '中文'
                    },{
                        value: 'en',
                        label: '英语'
                    },{
                        value: 'yue',
                        label: '粤语'
                    },{
                        value: 'wyw',
                        label: '文言文'
                    },{
                        value: 'jp',
                        label: '日语'
                    },{
                        value: 'kor',
                        label: '韩语'
                    },{
                        value: 'fra',
                        label: '法语'
                    },{
                        value: 'spa',
                        label: '西班牙语'
                    },{
                        value: 'th',
                        label: '泰语'
                    },{
                        value: 'ara',
                        label: '阿拉伯语'
                    },{
                        value: 'ru',
                        label: '俄语'
                    },{
                        value: 'pt',
                        label: '葡萄牙语'
                    },{
                        value: 'de',
                        label: '德语'
                    },{
                        value: 'it',
                        label: '意大利语'
                    },{
                        value: 'el',
                        label: '希腊语'
                    },{
                        value: 'nl',
                        label: '荷兰语'
                    },{
                        value: 'pl',
                        label: '波兰语'
                    },{
                        value: 'bul',
                        label: '保加利亚语'
                    },{
                        value: 'est',
                        label: '爱沙尼亚语'
                    },{
                        value: 'dan',
                        label: '丹麦语'
                    },{
                        value: 'fin',
                        label: '芬兰语'
                    },{
                        value: 'cs',
                        label: '捷克语'
                    },{
                        value: 'rom',
                        label: '罗马尼亚语'
                    },{
                        value: 'slo',
                        label: '斯洛文尼亚语'
                    },{
                        value: 'swe',
                        label: '瑞典语'
                    },{
                        value: 'hu',
                        label: '匈牙利语'
                    },{
                        value: 'cht',
                        label: '繁体中文'
                    },{
                        value: 'vie',
                        label: '越南语'
                    }],
				radioValue: '1',
				app_id: '应用ID',
				app_key: '应用密钥',
				youdao_button: true,
				baidu_button: false,
                selectSrcValue: 'auto',
                selectDistValue: 'en',
                input_appKey: '23059209eaca30b4',
                input_key: 'S3eW0xliXFpnviLkhhnBym9TFYVDNzVz',
                trans_source: '',
                translation: [],
                translation_show: false,
                basic: [],
                basic_show: false,
                web: [],
                web_show: false,
				//音标
				phonetic_show: false,
				phonetic: '',
				uk_phonetic: '',
				uk_speech: '',
				us_phonetic: '',
				us_speech: '',
				trans_result: [],
				trans_bd: false
            }
        },
        methods: {
            //单选按钮事件，得到下标值
            radioLabelValue(value){
				this.radioValue = value;
				if(value == '1'){
					this.app_id = "应用ID";
					this.app_key = "应用密钥";
					this.youdao_button = true;
					this.baidu_button = false;
					this.translation_show =  false;
				}
				if(value == '2'){
					this.app_id = "APPID";
					this.app_key = "密钥";
					this.youdao_button = false;
					this.baidu_button = true;
					this.basic_show = false;
					this.web_show = false;
					this.phonetic_show = false;
					this.translation_show = false;
				}
            },
            //下拉框事件，得到key值
            selectValue_src(value){
                this.selectSrcValue = value;               
            },
            selectValue_dist(value){
                this.selectDistValue = value;
            },
            //输入框事件
            appKeyInputValue(value){
                this.input_appKey = value;
            },
            keyInputValue(value){
                this.input_key = value;
            },
            truncate(q){
                let len = q.length;
                if(len<=20) return q;
                return q.substring(0, 10) + len + q.substring(len-10, len);
            },
			//播放音频
			playAudio(play_url){
				let au = new Audio(play_url);
				au.src = play_url;
				au.play();
			},
			//有道翻译
            youdaoTranslate(){
                let salt = (new Date).getTime();
                let currtime = Math.round(new Date().getTime()/1000);
                // 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
                let str1 = this.input_appKey + this.truncate(this.trans_source) + salt + currtime + this.input_key;
                let sign = CryptoJS.SHA256(str1).toString(CryptoJS.enc.Hex);
                //通过vue-resource来解决跨域问题
                this.$http.jsonp('http://openapi.youdao.com/api',{
                    params:{
                        q: this.trans_source,
                        appKey: this.input_appKey,
                        salt: salt,
                        from: this.selectSrcValue,
                        to: this.selectDistValue,
                        sign: sign,
                        signType: "v3",
                        curtime: currtime,
                    }
                }).then(function(res){
                    if(res.body.translation != null && res.body.translation.length > 0){
                        this.translation = res.body.translation;
                        this.translation_show = true;
                    }else{
                        this.translation = [];
                        this.translation_show = false;
                    }
                    if(res.body.basic != null && res.body.basic.explains.length > 0){						
                        this.basic = res.body.basic.explains;
                        this.basic_show = true;
						if(res.body.basic["uk-phonetic"] != null){
							this.phonetic_show = true;
							this.phonetic = res.body.basic.phonetic;
							this.uk_phonetic = res.body.basic["uk-phonetic"];
							this.uk_speech = res.body.basic["uk-speech"];
							this.us_phonetic = res.body.basic["us-phonetic"];
							this.us_speech = res.body.basic["us-speech"];
						}else{
							this.phonetic_show = false;
						}
						
                    }else{
                        this.basic = [];
                        this.basic_show = false;
                    }
                    if(res.body.web != null && res.body.web.length > 0){
                        this.web = res.body.web;
                        this.web_show = true;
                    }else{
                        this.web = [];
                        this.web_show = false;
                    }
                })
                //axios本身不支持跨域请求,需要配置文件辅助
                /*axios({
                    url: 'http://openapi.youdao.com/api',
                    method: 'post',
                    data: {
                        q: this.trans_source,
                        appKey: this.input_appKey,
                        salt: salt,
                        from: this.selectSrcValue,
                        to: this.selectDistValue,
                        sign: sign,
                        signType: "v3",
                        curtime: currtime
                    }
                }).then(function(res){
                    console.log(res);
                })*/
            },
			//百度翻译
			baiduTranslate(){
				let salt = new Date().getTime();
				// 多个query可以用\n连接  如 query='apple\norange\nbanana\npear'
				let str1 = this.input_appKey + this.trans_source + salt + this.input_key;
				let sign = this.MD5(str1);
				this.$http.jsonp('http://api.fanyi.baidu.com/api/trans/vip/translate',{
				    params:{
				        q: this.trans_source,
				        appid: this.input_appKey,
				        salt: salt,
				        from: this.selectSrcValue,
				        to: this.selectDistValue,
				        sign: sign
				    }
				}).then(function(res){
					if(res.body.trans_result != null && res.body.trans_result.length > 0){
						this.trans_result = res.body.trans_result;					
						this.translation_show = true;
					}else{
						this.trans_result = [];						
						this.translation_show = false;
					}
					
				})
			},
			MD5(string) {
			  
			    function RotateLeft(lValue, iShiftBits) {
			        return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
			    }
			  
			    function AddUnsigned(lX,lY) {
			        let lX4,lY4,lX8,lY8,lResult;
			        lX8 = (lX & 0x80000000);
			        lY8 = (lY & 0x80000000);
			        lX4 = (lX & 0x40000000);
			        lY4 = (lY & 0x40000000);
			        lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
			        if (lX4 & lY4) {
			            return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
			        }
			        if (lX4 | lY4) {
			            if (lResult & 0x40000000) {
			                return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
			            } else {
			                return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
			            }
			        } else {
			            return (lResult ^ lX8 ^ lY8);
			        }
			    }
			  
			    function F(x,y,z) { return (x & y) | ((~x) & z); }
			    function G(x,y,z) { return (x & z) | (y & (~z)); }
			    function H(x,y,z) { return (x ^ y ^ z); }
			    function I(x,y,z) { return (y ^ (x | (~z))); }
			  
			    function FF(a,b,c,d,x,s,ac) {
			        a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
			        return AddUnsigned(RotateLeft(a, s), b);
			    };
			  
			    function GG(a,b,c,d,x,s,ac) {
			        a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
			        return AddUnsigned(RotateLeft(a, s), b);
			    };
			  
			    function HH(a,b,c,d,x,s,ac) {
			        a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
			        return AddUnsigned(RotateLeft(a, s), b);
			    };
			  
			    function II(a,b,c,d,x,s,ac) {
			        a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
			        return AddUnsigned(RotateLeft(a, s), b);
			    };
			  
			    function ConvertToWordArray(string) {
			        let lWordCount;
			        let lMessageLength = string.length;
			        let lNumberOfWords_temp1 = lMessageLength + 8;
			        let lNumberOfWords_temp2 = (lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
			        let lNumberOfWords = (lNumberOfWords_temp2+1)*16;
			        let lWordArray = Array(lNumberOfWords-1);
			        let lBytePosition = 0;
			        let lByteCount = 0;
			        while ( lByteCount < lMessageLength ) {
			            lWordCount = (lByteCount-(lByteCount % 4))/4;
			            lBytePosition = (lByteCount % 4)*8;
			            lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
			            lByteCount++;
			        }
			        lWordCount = (lByteCount-(lByteCount % 4))/4;
			        lBytePosition = (lByteCount % 4)*8;
			        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
			        lWordArray[lNumberOfWords-2] = lMessageLength<<3;
			        lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
			        return lWordArray;
			    };
			  
			    function WordToHex(lValue) {
			        let WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
			        for (lCount = 0;lCount<=3;lCount++) {
			            lByte = (lValue>>>(lCount*8)) & 255;
			            WordToHexValue_temp = "0" + lByte.toString(16);
			            WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
			        }
			        return WordToHexValue;
			    };
			  
			    function Utf8Encode(string) {
			        string = string.replace(/\r\n/g,"\n");
			        let utftext = "";
			  
			        for (let n = 0; n < string.length; n++) {
			  
			            let c = string.charCodeAt(n);
			  
			            if (c < 128) {
			                utftext += String.fromCharCode(c);
			            }
			            else if((c > 127) && (c < 2048)) {
			                utftext += String.fromCharCode((c >> 6) | 192);
			                utftext += String.fromCharCode((c & 63) | 128);
			            }
			            else {
			                utftext += String.fromCharCode((c >> 12) | 224);
			                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
			                utftext += String.fromCharCode((c & 63) | 128);
			            }
			  
			        }
			  
			        return utftext;
			    };
			  
			    let x=Array();
			    let k,AA,BB,CC,DD,a,b,c,d;
			    let S11=7, S12=12, S13=17, S14=22;
			    let S21=5, S22=9 , S23=14, S24=20;
			    let S31=4, S32=11, S33=16, S34=23;
			    let S41=6, S42=10, S43=15, S44=21;
			  
			    string = Utf8Encode(string);
			  
			    x = ConvertToWordArray(string);
			  
			    a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
			  
			    for (k=0;k<x.length;k+=16) {
			        AA=a; BB=b; CC=c; DD=d;
			        a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
			        d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
			        c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
			        b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
			        a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
			        d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
			        c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
			        b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
			        a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
			        d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
			        c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
			        b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
			        a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
			        d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
			        c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
			        b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
			        a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
			        d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
			        c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
			        b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
			        a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
			        d=GG(d,a,b,c,x[k+10],S22,0x2441453);
			        c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
			        b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
			        a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
			        d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
			        c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
			        b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
			        a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
			        d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
			        c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
			        b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
			        a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
			        d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
			        c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
			        b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
			        a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
			        d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
			        c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
			        b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
			        a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
			        d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
			        c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
			        b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
			        a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
			        d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
			        c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
			        b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
			        a=II(a,b,c,d,x[k+0], S41,0xF4292244);
			        d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
			        c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
			        b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
			        a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
			        d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
			        c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
			        b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
			        a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
			        d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
			        c=II(c,d,a,b,x[k+6], S43,0xA3014314);
			        b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
			        a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
			        d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
			        c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
			        b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
			        a=AddUnsigned(a,AA);
			        b=AddUnsigned(b,BB);
			        c=AddUnsigned(c,CC);
			        d=AddUnsigned(d,DD);
			    }
			  
			    let temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
			  
			    return temp.toLowerCase();
			}
        }
    });
</script>
<style>

    .bg-purple-light {
        background: #303133;
    }
    .grid-content {
        color: white;
        font-family: "Arial Narrow";
		font-size: 20px;
        margin-top: 10px;
        border-radius: 10px;
        min-height: 300px;
        min-width: 478.13px;
    }
</style>
</body>
</html>